{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主界面</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <style>
        /* 全局样式 */
        body {
            font-family: "Arial", sans-serif;
            background-color: #f5f6fa;
            margin: 0;
            display: flex;
            height: 100vh;
            overflow: hidden;
        }

        /* 边栏样式 */
        .sidebar {
            width: 250px;
            height: 100vh;
            background: linear-gradient(135deg, #3a81c3, #27496d);
            color: white;
            position: fixed;
            left: 0;
            top: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            transition: width 0.3s ease;
            box-shadow: 3px 0 10px rgba(0, 0, 0, 0.1);
        }

        .sidebar.collapsed {
            width: 80px;
        }

        .sidebar-header {
            font-size: 1.8rem;
            font-weight: bold;
            margin: 20px 0;
            color: #fff;
            text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
        }

        .nav-item {
            width: 90%;
            padding: 10px; /* 控制每个菜单项的内边距 */
            margin: 5px 0; /* 控制菜单项之间的间距 */
            text-align: left;
            display: flex;
            align-items: center;
            justify-content: flex-start; /* 左对齐内容 */
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .nav-item i {
            margin-right: 10px; /* 图标与文字的间距 */
            font-size: 1rem; /* 图标大小 */
        }

        .nav-item span {
            font-size: 0.9rem; /* 调整文字大小 */
        }

        .nav-item:hover {
            background-color: rgba(255, 255, 255, 0.1);
            transform: translateX(5px); /* 鼠标悬停时的动态效果 */
        }

        .sidebar.collapsed .nav-item span {
            opacity: 0;
            visibility: hidden;
        }

        .sidebar.collapsed .nav-item i {
            margin-right: 0;
        }

        /* 子菜单样式 */
        .sub-menu {
            margin: 0;
            padding-left: 30px; /* 控制子菜单的缩进 */
            display: none;
            flex-direction: column;
        }

        .nav-item:hover .sub-menu {
            display: flex; /* 鼠标悬停时显示子菜单 */
        }

        .sub-menu-item {
            padding: 8px 0;
            margin: 0;
            font-size: 0.9rem; /* 保持子菜单文字大小一致 */
            color: #ddd;
            text-decoration: none;
            transition: all 0.3s ease;
            display: flex;
            align-items: center; /* 确保子菜单项的对齐方式一致 */
        }

        .sub-menu-item i {
            margin-right: 10px;
            font-size: 0.9rem; /* 子菜单图标大小 */
        }

        .sub-menu-item:hover {
            background-color: rgba(255, 255, 255, 0.1);
            color: #fff;
        }

        /* 内容区域样式 */
        .main-content {
            margin-left: 250px;
            width: calc(100% - 250px);
            display: flex;
            flex-direction: column;
            transition: margin-left 0.3s ease, width 0.3s ease;
            padding-left: 30px; /* 或者增加内边距 */
            padding-right: 30px; /* 或者增加内边距 */
        }

        .sidebar.collapsed + .main-content {
            margin-left: 80px;
            width: calc(100% - 80px);
        }

        /* 动态效果 */
        .nav-item:hover i {
            color: #6cdbeb;
        }

        .nav-item:hover span {
            color: #fff;
        }

        /* 顶部导航栏 */
        .navbar {
            background-color: #ffffff;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .navbar-brand {
            font-size: 1.5rem;
            font-weight: bold;
            color: #007bff !important;
        }

        .nav-link {
            font-size: 1rem;
            white-space: nowrap;
            padding: 0.5rem 1rem;
            color: #6c757d;
        }

        .nav-link.active {
            font-weight: bold;
            color: #007bff;
        }

        .navbar-text {
            font-size: 1rem;
            color: #6c757d;
        }

        .btn-outline-danger {
            padding: 0.25rem 0.75rem;
            font-size: 0.9rem;
        }
    </style>

    <style>
        .welcome-section {
            text-align: center;
            margin-top: 20px;
        }
        .welcome-section h1 {
            font-size: 2rem;
            color: #007bff;
        }
        .welcome-section p {
            font-size: 1.2rem;
            color: #555;
        }
    </style>

    <style>
        .status-container {
            display: flex;
            justify-content: space-around;
            align-items: center;
            margin-top: 50px;
            padding: 20px;
            gap: 20px;
        }

        .status-card {
            width: 180px;
            height: 120px;
            background: linear-gradient(135deg, #3a81c3, #27496d);
            color: white;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            border-radius: 15px;
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            cursor: pointer;
        }

        .status-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 25px rgba(0, 0, 0, 0.3);
        }

        .status-card h3 {
            font-size: 1.2rem;
            margin-bottom: 10px;
        }

        .status-card .count {
            font-size: 2rem;
            font-weight: bold;
            animation: fade-in 1s ease;
        }

        /* 数字动画 */
        @keyframes fade-in {
            from {
                opacity: 0;
                transform: scale(0.9);
            }
            to {
                opacity: 1;
                transform: scale(1);
            }
        }


    </style>
    <style>
        .card-img-top {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .card-img-top:hover {
            transform: scale(1.05);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
        }

        .card-body {
            background: #f8f9fa;
            text-align: center;
        }

        .card-text {
            font-size: 1rem;
            font-weight: bold;
            color: #007bff;
        }

        .container {
            max-width: 1100px;
        }
    </style>

</head>
<body>

<!-- 左侧边栏 -->
<div class="sidebar" id="sidebar">

    <div class="sidebar-header">系统导航</div>

    {% if request.user.role == 'admin' %}
        <!-- 管理员边栏 -->
        <div class="nav-item">
            <i class="fas fa-users-cog"></i>
            <a href="{% url 'user_management' %}" class="nav-link text-white">用户管理</a>
        </div>

        <div class="nav-item">
            <i class="fas fa-database"></i>
            <span>&nbsp;&nbsp;&nbsp;&nbsp;数据库管理</span>
            <div class="sub-menu">
                <a href="{% url 'backup' %}" class="sub-menu-item">备份</a>
                <a href="{% url 'restore_database' %}" class="sub-menu-item">恢复</a>
            </div>
        </div>

        <div class="nav-item">
            <i class="fas fa-file-upload"></i>
            <a href="{% url 'upload_geological_info' %}" class="nav-link text-white">上传地质信息</a>
        </div>

        <div class="nav-item">
            <i class="fas fa-layer-group"></i>
            <a href="{% url 'geological_list' %}" class="nav-link text-white">地质信息管理</a>
        </div>

        <div class="nav-item">
            <i class="fas fa-check-circle"></i>
            <a href="{% url 'approval_list' %}" class="nav-link text-white">审批地质信息</a>
        </div>

        <div class="nav-item">
            <i class="fas fa-book"></i>
            <a href="{% url 'user_records_view' %}" class="nav-link text-white">我的数据记录</a>
        </div>

        <div class="nav-item">
            <i class="fas fa-folder"></i>
            <span>&nbsp;&nbsp;&nbsp;&nbsp;文件管理</span>
            <div class="sub-menu">
                <a href="{% url 'upload' %}" class="sub-menu-item">文件上传</a>
                <a href="{% url 'preview' %}" class="sub-menu-item">文件预览</a>
            </div>
        </div>

        <div class="nav-item">
            <i class="fas fa-chart-line"></i>
            <a href="{% url 'geological_statistics' %}" class="nav-link text-white">统计报表</a>
        </div>

        <div class="nav-item">
            <i class="fas fa-file-export"></i>
            <a href="{% url 'export_geological_view' %}" class="nav-link text-white">数据导出</a>
        </div>

        <div class="nav-item">
            <i class="fas fa-sign-out-alt"></i>
            <a href="{% url 'logout' %}" class="nav-link text-white">退出系统</a>
        </div>

    {% elif request.user.role == 'user' %}
        <!-- 普通用户边栏 -->

        <div class="nav-item">
            <i class="fas fa-file-upload"></i>
            <a href="{% url 'upload_geological_info_user' %}" class="nav-link text-white">上传地质信息</a>
        </div>

        <div class="nav-item">
            <i class="fas fa-book"></i>
            <a href="{% url 'user_records_view' %}" class="nav-link text-white">我的数据记录</a>
        </div>

        <div class="nav-item">
            <i class="fas fa-folder"></i>
            <span>&nbsp;&nbsp;&nbsp;&nbsp;文件管理</span>
            <div class="sub-menu">
                <a href="{% url 'upload' %}" class="sub-menu-item">文件上传</a>
                <a href="{% url 'preview_user' %}" class="sub-menu-item">文件预览</a>
            </div>
        </div>

        <div class="nav-item">
            <i class="fas fa-chart-line"></i>
            <a href="{% url 'geological_statistics' %}" class="nav-link text-white">统计报表</a>
        </div>

        <div class="nav-item">
            <i class="fas fa-file-export"></i>
            <a href="{% url 'export_geological_view' %}" class="nav-link text-white">数据导出</a>
        </div>

        <div class="nav-item">
            <i class="fas fa-sign-out-alt"></i>
            <a href="{% url 'logout' %}" class="nav-link text-white">退出系统</a>
        </div>

    {% elif request.user.role == 'auditor' %}
        <!-- 审计员边栏 -->
        <div class="nav-item">
            <i class="fas fa-database"></i>
            <span>&nbsp;&nbsp;&nbsp;&nbsp;数据库管理</span>
            <div class="sub-menu">
                <a href="{% url 'backup' %}" class="sub-menu-item">备份</a>
                <a href="{% url 'restore_database' %}" class="sub-menu-item">恢复</a>
            </div>
        </div>

        <div class="nav-item">
            <i class="fas fa-chart-bar"></i>
            <a href="{% url 'view_audit_logs' %}" class="nav-link text-white">审计日志</a>
        </div>

        <div class="nav-item">
            <i class="fas fa-chart-line"></i>
            <a href="{% url 'geological_statistics' %}" class="nav-link text-white">统计报表</a>
        </div>

        <div class="nav-item">
            <i class="fas fa-file-export"></i>
            <a href="{% url 'export_geological_view' %}" class="nav-link text-white">数据导出</a>
        </div>

        <div class="nav-item">
            <i class="fas fa-sign-out-alt"></i>
            <a href="{% url 'logout' %}" class="nav-link text-white">退出系统</a>
        </div>
    {% endif %}

</div>


<!-- 主内容 -->
<div class="main-content">

    <nav class="navbar navbar-expand-lg navbar-light bg-light shadow-sm">
        <div class="container-fluid">
            <!-- 左侧标题 -->
            <a class="navbar-brand fw-bold text-primary" href="#" style="font-size: 1.5rem;">信息管理系统</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <!-- 左侧导航菜单 -->
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-3">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="{% url 'index' %}">主界面</a>
                    </li>
                    {% if user.is_authenticated %}
                        <li class="nav-item">
                            <a class="nav-link" href="{% url 'logout' %}">登出</a>
                        </li>
                    {% else %}
                        <li class="nav-item">
                            <a class="nav-link" href="{% url 'login' %}">登录</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{% url 'register' %}">注册</a>
                        </li>
                    {% endif %}
                    <li class="nav-item">
                        <a class="nav-link" href="#">关于</a>
                    </li>
                </ul>
                <!-- 用户信息和退出登录 -->
                {% if user.is_authenticated %}
                    <div class="d-flex ms-auto align-items-center">
                    <span class="navbar-text me-3 text-secondary">
                        欢迎，<strong>{{ user.username }}</strong>
                    </span>
                        <a href="{% url 'logout' %}" class="btn btn-outline-danger btn-sm">退出登录</a>
                    </div>
                {% endif %}
            </div>
        </div>
    </nav>

    <div class="welcome-section">
        <h1>欢迎回来，{{ user.username }}！</h1>
        <p>祝您工作愉快，随时查看您的最新数据。</p>
    </div>

    <div id="status-cards" class="d-flex justify-content-between">
        <div class="status-card">
            <h4>新增待审批</h4>
            <p id="pending-count">加载中...</p>
        </div>
        <div class="status-card">
            <h4>修改待审批</h4>
            <p id="modified-pending-count">加载中...</p>
        </div>
        <div class="status-card">
            <h4>删除待审批</h4>
            <p id="deleted-pending-count">加载中...</p>
        </div>
        <div class="status-card">
            <h4>未通过审批</h4>
            <p id="rejected-count">加载中...</p>
        </div>
        <div class="status-card">
            <h4>有效数据</h4>
            <p id="approved-count">加载中...</p>
        </div>
    </div>


    <div class="container mt-4">
        <div class="row g-4">
            <!-- 图片 1 -->
            <div class="col-md-4">
                <div class="card border-0 shadow-sm">
                    <img src="{% static 'images/img_4.png' %}" class="card-img-top rounded" alt="图片描述">
                    <div class="card-body">
                        <p class="card-text text-center">掌子面照片</p>
                    </div>
                </div>
            </div>

            <!-- 图片 2 -->
            <div class="col-md-4">
                <div class="card border-0 shadow-sm">
                    <img src="{% static 'images/img_5.png' %}" class="card-img-top rounded" alt="图片描述">
                    <div class="card-body">
                        <p class="card-text text-center">隧道剖面照片</p>
                    </div>
                </div>
            </div>

            <!-- 图片 3 -->
            <div class="col-md-4">
                <div class="card border-0 shadow-sm">
                    <img src="{% static 'images/img9.png' %}" class="card-img-top rounded" alt="图片描述">
                    <div class="card-body">
                        <p class="card-text text-center">统计图展示</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container mt-4">
        <div class="row g-4">
            <!-- 图片 1 -->
            <div class="col-md-4">
                <div class="card border-0 shadow-sm">
                    <img src="{% static 'images/img13.png' %}" class="card-img-top rounded" alt="图片描述">
                    <div class="card-body">
                        <p class="card-text text-center">超欠挖诊断照片</p>
                    </div>
                </div>
            </div>

            <!-- 图片 2 -->
            <div class="col-md-4">
                <div class="card border-0 shadow-sm">
                    <img src="{% static 'images/img_3.png' %}" class="card-img-top rounded" alt="图片描述">
                    <div class="card-body">
                        <p class="card-text text-center">超欠挖计算照片</p>
                    </div>
                </div>
            </div>

            <!-- 图片 3 -->
            <div class="col-md-4">
                <div class="card border-0 shadow-sm">
                    <img src="{% static 'images/img10.png' %}" class="card-img-top rounded" alt="图片描述">
                    <div class="card-body">
                        <p class="card-text text-center">统计图展示</p>
                    </div>
                </div>
            </div>
        </div>
    </div>











</div>

<script>
    // 边栏折叠功能
    const sidebar = document.getElementById('sidebar');
    sidebar.addEventListener('dblclick', () => {
        sidebar.classList.toggle('collapsed');
    });
</script>

<script>
    $(document).ready(function() {
        // 动态获取统计数据
        function fetchStatusCounts() {
            console.log("准备发送 AJAX 请求..."); // 输出调试信息

            $.ajax({
                url: "{% url 'get_status_counts' %}",  // 确保与后端视图的 URL 名称一致
                method: "GET",
                beforeSend: function() {
                    console.log("AJAX 请求即将发送...");
                },
                success: function(response) {
                    console.log("成功接收到响应数据：", response); // 输出响应数据到控制台

                    // 更新页面中的统计数据
                    $('#pending-count').text(response.data['新增待审批']);
                    $('#modified-pending-count').text(response.data['修改待审批']);
                    $('#deleted-pending-count').text(response.data['删除待审批']);
                    $('#rejected-count').text(response.data['未通过审批']);
                    $('#approved-count').text(response.data['有效数据']);

                    console.log("页面更新完成！"); // 确认更新完成
                },
                error: function(xhr, status, error) {
                    console.error("请求失败：状态 -", status, "错误 -", error); // 输出错误信息
                    console.error("错误响应内容：", xhr.responseText); // 输出错误响应内容
                    alert("无法加载数据，请稍后重试。");
                },
                complete: function() {
                    console.log("AJAX 请求完成，无论成功或失败。"); // 请求完成后的调试信息
                }
            });
        }

        // 页面加载时立即执行
        console.log("页面加载完成，开始获取数据...");
        fetchStatusCounts();

        // 每隔一段时间刷新数据（可选）
        setInterval(function() {
            console.log("开始定时刷新数据...");
            fetchStatusCounts();
        }, 6000); // 每隔 6 秒刷新一次
    });
</script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>


<footer style="position: fixed; bottom: 0; width: 100%; background-color: #f8f9fa; text-align: center; padding: 10px 0; box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); font-size: 14px; color: #6c757d;">
    © 2025  铁路隧道施工信息管理系统 - 版权所有
</footer>

</body>
</html>